<template>
  <div class="payment-container">
    <el-card class="payment-card">
      <div class="header-nav">
        <el-button
            type="primary"
            icon="el-icon-back"
            @click="goBack"
            class="back-btn"
        >
          返回购物车
        </el-button>
      </div>

      <h2 class="payment-title">订单支付</h2>

      <div class="order-summary">
        <h3>订单摘要</h3>
        <div class="summary-item">
          <span>商品总价：</span>
          <span class="price">¥{{ totalPrice.toFixed(2) }}</span>
        </div>
        <div class="summary-item">
          <span>运费：</span>
          <span class="price">¥0.00</span>
        </div>
        <div class="summary-item total">
          <span>应付总额：</span>
          <span class="price">¥{{ totalPrice.toFixed(2) }}</span>
        </div>
      </div>

      <div class="payment-methods">
        <h3>选择支付方式</h3>
        <el-radio-group v-model="paymentMethod" class="payment-options">
          <el-radio :label="'alipay'" class="payment-option">
            <div class="payment-icon alipay"></div>
            <span>支付宝支付</span>
          </el-radio>
          <el-radio :label="'wechat'" class="payment-option">
            <div class="payment-icon wechat"></div>
            <span>微信支付</span>
          </el-radio>
        </el-radio-group>
      </div>

      <div class="payment-footer">
        <el-button
            type="primary"
            @click="confirmPayment"
            :loading="isPaying"
            :disabled="!paymentMethod"
            class="confirm-btn"
        >
          {{ isPaying ? '支付处理中...' : '确认支付' }}
        </el-button>
      </div>
      <el-dialog
          title="扫码支付"
          :visible.sync="qrCodeVisible"
          width="30%"
          center
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <div class="qrcode-container">
          <div v-if="paymentMethod === 'alipay'" class="qrcode-alipay">
            <img src="https://via.placeholder.com/200x200?text=支付宝支付二维码" alt="支付宝支付二维码">
            <p>请使用支付宝扫码支付</p>
          </div>
          <div v-else class="qrcode-wechat">
            <img src="https://via.placeholder.com/200x200?text=微信支付二维码" alt="微信支付二维码">
            <p>请使用微信扫码支付</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
              type="primary"
              @click="checkPaymentStatus"
              :loading="isCheckingStatus"
              :disabled="isCheckingStatus"
          >
            {{ isCheckingStatus ? '检查支付状态...' : '已完成支付' }}
          </el-button>
        </span>
      </el-dialog>

      <el-dialog
          title="支付成功"
          :visible.sync="successVisible"
          width="30%"
          center
      >
        <div class="success-container">
          <i class="el-icon-circle-check success-icon"></i>
          <p>您的订单已支付成功！</p>
          <p>我们将尽快为您处理订单</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="goToOrderDetail">查看订单详情</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paymentMethod: '',
      isPaying: false,
      qrCodeVisible: false,
      isCheckingStatus: false,
      successVisible: false,
      cartItems: [
        {
          id: 1,
          name: '三体全集',
          sku: 'BOOK001',
          price: 128.0,
          quantity: 1,
          image: 'https://example.com/book1.jpg'
        },
        {
          id: 2,
          name: '人类简史',
          sku: 'BOOK002',
          price: 68.0,
          quantity: 2,
          image: 'https://example.com/book2.jpg'
        }
      ]
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    confirmPayment() {
      if (!this.paymentMethod) {
        this.$message.warning('请选择支付方式')
        return
      }

      this.isPaying = true

      setTimeout(() => {
        this.isPaying = false
        this.qrCodeVisible = true
      }, 1500)
    },
    async getPaymentQrCode() {
      // 实际项目中调用API获取支付二维码
      // const res = await api.getPaymentQrCode({
      //   amount: this.totalPrice,
      //   paymentMethod: this.paymentMethod
      // })
    },
    checkPaymentStatus() {
      this.isCheckingStatus = true
      setTimeout(() => {
        this.isCheckingStatus = false
        this.qrCodeVisible = false
        this.successVisible = true
      }, 2000)
    },
    async pollPaymentStatus() {
      // 实际项目中实现轮询检查支付状态
      // const timer = setInterval(async () => {
      //   const res = await api.checkPaymentStatus(orderId)
      //   if (res.paid) {
      //     clearInterval(timer)
      //     this.qrCodeVisible = false
      //     this.successVisible = true
      //   }
      // }, 3000)
    },
    goToOrderDetail() {
      this.$router.push('/orders/123') // 跳转到订单详情页
    }
  }
}
</script>

<style scoped>
.payment-container {
  padding: 30px;
  background: #f5f7fa;
  min-height: 100vh;
}

.payment-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.header-nav {
  margin-bottom: 15px;
}

.back-btn {
  padding: 12px 25px;
  border-radius: 8px;
  transition: all 0.3s;
}

.back-btn:hover {
  transform: translateX(-5px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.payment-title {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.order-summary {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.order-summary h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #606266;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.summary-item.total {
  font-weight: bold;
  font-size: 16px;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed #e0e0e0;
}

.price {
  color: #f56c6c;
}

.payment-methods {
  margin-bottom: 30px;
}

.payment-methods h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #606266;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-option:hover {
  border-color: #409eff;
}

.payment-option.is-checked {
  border-color: #409eff;
  background-color: #f0f7ff;
}

.payment-icon {
  width: 40px;
  height: 40px;
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.payment-icon.alipay {
  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/WUEmWHiJYvgAYdoFVTkE.png');
}

.payment-icon.wechat {
  background-image: url('https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico');
}

.payment-footer {
  text-align: center;
  margin-top: 30px;
}

.confirm-btn {
  width: 200px;
  padding: 15px;
  font-size: 16px;
}

/* 二维码弹窗样式 */
.qrcode-container {
  text-align: center;
  padding: 20px 0;
}

.qrcode-container img {
  width: 200px;
  height: 200px;
  margin: 0 auto 15px;
  display: block;
  border: 1px solid #e0e0e0;
  padding: 10px;
  background: white;
}

.qrcode-container p {
  margin: 10px 0;
  color: #606266;
}

/* 支付成功样式 */
.success-container {
  text-align: center;
  padding: 20px 0;
}

.success-icon {
  font-size: 60px;
  color: #67c23a;
  margin-bottom: 15px;
}

.success-container p {
  margin: 10px 0;
  color: #606266;
}

@media (max-width: 768px) {
  .payment-container {
    padding: 15px;
  }

  .back-btn {
    width: 100%;
    margin-bottom: 15px;
  }

  .payment-option {
    padding: 10px;
  }

  .payment-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
</style>